<h1>二手商品区域设置</h1>
<div class="row">
  <span class="label">组件名</span>
  <input nz-input placeholder="字母数字下划线组成，用于锚点" [disabled]="componentNameDisabled" [(ngModel)]="componentData.name"/>
</div>
<div class="row">
  <span class="label">展示数量</span>
  <input nz-input placeholder="展示数量" [(ngModel)]="componentData.showNum"/>
</div>
<div class="row">
  <span class="label">上边距</span>
  <input nz-input placeholder="请输入上边距" [(ngModel)]="componentData.marginTop"/>
</div>
<div class="row">
  <span class="label">下边距</span>
  <input nz-input placeholder="请输入下边距" [(ngModel)]="componentData.marginBottom"/>
</div>
<nz-divider></nz-divider>

<div class="contentList">
  <div cdkDropList (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of componentData.content;let index = index"  cdkDragBoundary=".contentList"
         style="display: flex;flex-direction: row;margin-bottom: 8px;background: white;align-items: center"
         [ngStyle]="{marginBottom: componentData.content.length===index+1?'0':'8px'}"
         cdkDrag>
      <div class="row">
        <span class="label">设备ID</span>
        <span style="display: inline-block;min-width: 160px">{{item['id']}}</span>
      </div>
      <button nzSize="small" nzDanger nz-button nzType="default"
              style="margin: 0 8px"
              nz-popconfirm
              nzPopconfirmTitle="确认要删除吗"
              (nzOnConfirm)="removeItem(index)"
              nzPopconfirmPlacement="left">
        <i nz-icon nzType="delete"></i>
      </button>
      <button nzSize="small" nz-button nzType="default">
        <a href="https://parts.i5.cn/index.html?i5debugger=true#/phone/phoneDetail?id={{ item['id'] }}&source=order"
           target="_blank">
          <i nz-icon nzType="eye"></i>
        </a>
      </button>
    </div>
  </div>
</div>

<div>
  <button nzSize="large" style="width: 100%;margin-top: 24px" nz-button nzType="default" (click)="showGoodsModal()">
    <i nz-icon nzType="plus"></i>
  </button>
</div>

<div class="footer">
<!--  <div style="display: flex;justify-content: space-evenly">-->
<!--    <button nz-button nzType="default" (click)="closeComponent.emit()">关闭</button>-->
<!--    <button nz-button nzType="primary" (click)="saveBtn()">保存</button>-->
<!--  </div>-->
  <div class="remark">
    <pre>
      规则说明：
      1.pc端每行5个商品，移动端每行2个商品，请留意匹配度。
      2.该组件依然会根据用户身份在前端显示商品，请注意。
    </pre>
  </div>
</div>



<nz-modal
  [nzVisible]="goodsModal.visible"
  [nzContent]="modalContent"
  nzWidth="1600px"
  [nzFooter]="null"
  (nzOnCancel)="hideGoodsModal()"
>
  <ng-template #modalContent>

    <nz-row>
    <div class="searchItem">
      <label for="noQuery">编码：</label>
      <input
        id="noQuery"
        nz-input
        placeholder="编码"
        [(ngModel)]="query.equipmentCode"
      />
    </div>
    <div class="searchItem">
      <label for="brandQuery">设备品牌：</label>
      <nz-select id="brandQuery" [(ngModel)]="query.typeId" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
                 (ngModelChange)="getTypeList()" [nzMaxTagCount]="1" nzAllowClear
                 nzShowSearch>
        <nz-option [nzValue]="brand.id" [nzLabel]="brand.name" *ngFor="let brand of brandOptions"></nz-option>
      </nz-select>
    </div>
    <div class="searchItem">
      <label for="typeQuery">设备型号：</label>
      <nz-select id="typeQuery" [(ngModel)]="query.modelId" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
                 [nzMaxTagCount]="1" nzAllowClear
                 nzShowSearch>
        <nz-option [nzValue]="type.id" [nzLabel]="type.name" *ngFor="let type of typeOptions"></nz-option>
      </nz-select>
    </div>
    <div class="searchItem">
      <label for="statusQuery">状态：</label>
      <nz-select id="statusQuery" [(ngModel)]="query.status" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
                 [nzMaxTagCount]="1" nzAllowClear
                 nzShowSearch>
        <nz-option [nzValue]="0" nzLabel="上架中"></nz-option>
        <nz-option [nzValue]="1" nzLabel="待上架"></nz-option>
        <nz-option [nzValue]="2" nzLabel="已售出"></nz-option>
        <nz-option [nzValue]="3" nzLabel="售后中"></nz-option>
        <nz-option [nzValue]="4" nzLabel="已冻结"></nz-option>
        <nz-option [nzValue]="5" nzLabel="草稿"></nz-option>
        <nz-option [nzValue]="6" nzLabel="审核不通过"></nz-option>
        <nz-option [nzValue]="7" nzLabel="待审核"></nz-option>
      </nz-select>
    </div>
    <div class="searchItem">
      <label for="availableQuery">适用用户：</label>
      <nz-select id="availableQuery" [(ngModel)]="query.userType" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
                 [nzMaxTagCount]="1" nzAllowClear
                 nzShowSearch>
        <nz-option [nzValue]="0" nzLabel="不限"></nz-option>
        <nz-option [nzValue]="1" nzLabel="C端"></nz-option>
        <nz-option [nzValue]="2" nzLabel="B端"></nz-option>
      </nz-select>
    </div>
    <div class="searchItem">
      <label for="locationQuery">库位：</label>
      <nz-select id="locationQuery" [(ngModel)]="query.libraryId" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
                 [nzMaxTagCount]="1" nzAllowClear
                 nzShowSearch>
        <nz-option [nzValue]="location.id" [nzLabel]="location.name" *ngFor="let location of locationOptions"></nz-option>
      </nz-select>
    </div>
    <div class="searchItem">
      <label for="colourB">B端成色：</label>
      <nz-select id="colourB" [(ngModel)]="query.colourB" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
                 [nzMaxTagCount]="1" nzAllowClear
                 nzShowSearch>
        <nz-option [nzValue]="colour.id" [nzLabel]="colour.name" *ngFor="let colour of colourBOptions"></nz-option>
      </nz-select>
    </div>
    <div class="searchItem">
      <label for="colourC">C端成色：</label>
      <nz-select id="colourC" [(ngModel)]="query.colourC" nzPlaceHolder="全部" nzMode="multiple" [nzBackdrop]="true"
                 [nzMaxTagCount]="1" nzAllowClear
                 nzShowSearch>
        <nz-option [nzValue]="colour.id" [nzLabel]="colour.name" *ngFor="let colour of colourOptions"></nz-option>
      </nz-select>
    </div>
    <div class="searchItem">
      <button nz-button nzType="primary" (click)="queryBtn()">查询</button>
      <button nz-button nzType="default" (click)="resetQuery()">重置</button>
    </div>
    </nz-row>

    <nz-row>
      <div class="searchItem">
        <button nz-button nzType="primary" (click)="addDevice()">添加已选中</button>
      </div>
    </nz-row>
    <!--表格-->
    <nz-table
      style="margin-top: 8px"
      #rowSelectionTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzData]="listOfData.records"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="listOfData.total"
      [(nzPageIndex)]="query.page"
      [(nzPageSize)]="query.pageSize"
      [nzFrontPagination]="false"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
    >
      <thead>
      <tr>
        <th
          [(nzChecked)]="checked"
          [nzIndeterminate]="indeterminate"
          (nzCheckedChange)="onAllChecked($event)"
        ></th>
        <th nzAlign="center">ID</th>
        <th nzAlign="center">机器编码</th>
        <th nzAlign="center">库位</th>
        <th nzAlign="center">状态</th>
        <th nzAlign="center">适用用户</th>
        <th nzAlign="center">成交价</th>
        <th nzAlign="center">B端售价</th>
        <th nzAlign="center">C端售价</th>
        <th nzAlign="center">品牌</th>
        <th nzAlign="center">型号</th>
        <th nzAlign="center">B端成色</th>
        <th nzAlign="center">C端成色</th>
        <th nzAlign="center">内存</th>
        <th nzAlign="center">版本</th>
<!--        <th nzAlign="center" nzWidth="80px">操作</th>-->
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of rowSelectionTable.data;let index=index;" [ngClass]="{sold: data['status']===2}">
        <td [nzDisabled]="goodsModal.ids.has(data['id'])"
          [nzChecked]="setOfCheckedId.has(data['id'])"
          (nzCheckedChange)="onItemChecked(data['id'], $event)">
        </td>
        <!-- id -->
        <td nzAlign="center">{{ data['id'] }}</td>
        <!-- 机器编码 -->
        <td nzAlign="center">{{ data['equipmentCode'] }}</td>
        <!-- 库位 -->
        <td nzAlign="center">{{ data['libraryName'] }}</td>
        <!-- 状态 -->
        <td nzAlign="center" [attr.statusColor]="data['status']">{{ COMMODITYSTATUS[data['status']] }}</td>
        <!-- 适用用户 -->
        <td nzAlign="center">{{ USERTYPE[data['userType']] }}</td>
        <!-- 成交价 -->
        <td nzAlign="center">{{ (data['realValuation'] || 0) + (data['aprc'] || 0) }}</td>
        <!-- B端售价 -->
        <td nzAlign="center"
            [ngStyle]="{color: data['shopPriceB']!==0&&data['shopPriceB']<data['realValuation']?'rgb(255, 165, 2)':''}"
            [ngClass]="{sold: data['status']===2}">
          {{ data['shopPriceB'] || 0 }}
        </td>
        <!-- C端售价 -->
        <td nzAlign="center"
            [ngStyle]="{color: data['shopPriceC']!==0&&data['shopPriceC']<data['realValuation']?'rgb(255, 165, 2)':''}"
            [ngClass]="{sold: data['status']===2}">
          {{ data['shopPriceC'] || 0 }}
        </td>
        <!-- 品牌 -->
        <td nzAlign="center">{{ data['typeName'] }}</td>
        <!-- 型号 -->
        <td nzAlign="center">{{ data['modelName'] }}</td>
        <!-- B端成色 -->
        <td nzAlign="center">{{ data['colourNameB'] }}</td>
        <!-- C端成色 -->
        <td nzAlign="center">{{ data['colourName'] }}</td>
        <!-- 内存 -->
        <td nzAlign="center">{{ data['memory'] }}</td>
        <!-- 版本 -->
        <td nzAlign="center">{{ data['version'] }}</td>
        <!-- 操作 -->
<!--        <td nzAlign="center">-->
<!--          <a *ngIf="!goodsModal.ids.has(data['id'])" (click)="addDevice(data)">选择</a>-->
<!--        </td>-->
      </tr>
      </tbody>
    </nz-table>
    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{total }} 条</ng-template>
  </ng-template>
</nz-modal>
